<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件间的通信</title>
</head>
<body>
<fieldset id="root">
    <legend><h1>这是父组件</h1></legend>
    <child1 :c1-msg="rootMsg" :c2-num="rootNum" :c3array="array" :c4_obj="Obj"></child1>

</fieldset>
<template id="child1">
    <fieldset>
        <legend><h2>这是child1子组件</h2></legend>

        <p>接收从root父组件中传入的数据:{{c1Msg}}</p>
        <p>这是数字:{{c2Num}}</p>
        <ul>
            <li v-for="(v,i) in c3array" :key="i">{{v}}</li>
        </ul>
        <ul>
            <li v-for="(v,k) in c4_obj" :key="k">{{v}}</li>
        </ul>
    </fieldset>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let child1 = {
        template: "#child1",
        data: function () {
            return {}
        },
        //输入属性
        // props: {
        //     c1Msg: {
        //         type: String,
        //         default: "默认值"
        //     },
        //     c2Num: {
        //         type: Number,
        //     },
        //     c3array: {
        //         type: Array,
        //         default: function () {
        //             return ["abc", "cba", "acb"];
        //         }
        //     },
        //     c4_obj: {
        //         type: Object,
        //         default: function () {
        //             return {
        //                 name: "哇哈哈",
        //                 age: 19,
        //                 sex: "男"
        //             }
        //         }
        //     }
        //
        //
        // }
props:["c1Msg","c2Num","c3array","c4_obj"]
    }
    //========================设置父组件
    new Vue({
        el: "#root",
        data: {
            rootMsg: "这是root中提供的数据",
            rootNum: 666,
            array: ["年后", "我们", "怎么了"],
            Obj: {
                name: "小李",
                age:30,
                sex:"女"
            }
        },
        components: {
            child1
        }
    })
</script>